<template>
	<view class="bg-white flex flex-direction justify-between" style="width: 100vw; height: 100vh;">
		<view>
			<cu-custom bgColor="bg-white" :isBack="true">
				<block slot="content">
					<text style="font-size: 32rpx; color: #333333; font-weight: bold;">设置</text>
				</block>
			</cu-custom>
			<view class="flex justify-between" style="padding: 32rpx 32rpx;" @click="goToEdit('security')">
				<view class="field-name" style="color: #333333; font-size: 32rpx;">账号与安全</view>
				<view class="flex justify-end align-center">
					<view class="cuIcon-right" style="margin-left: 16rpx; font-size: 32rpx;"></view>
				</view>
			</view>
			<view class="flex justify-between" style="padding: 32rpx 32rpx;" @click="goToEdit('privacy')">
				<view class="field-name" style="color: #333333; font-size: 32rpx;">隐私</view>
				<view class="flex justify-end align-center">
					<view class="cuIcon-right" style="margin-left: 16rpx; font-size: 32rpx;"></view>
				</view>
			</view>
			<view v-if="develop" class="flex justify-between" style="padding: 32rpx 32rpx;">
				<view class="field-name" style="color: #333333; font-size: 32rpx;">个性化推荐</view>
				<switch @change="changePersonalized " :class="personalized?'checked':''" :checked="personalized?true:false"></switch>
			</view>
			<view v-if="develop" class="flex justify-between" style="padding: 32rpx 32rpx;">
				<view class="field-name" style="color: #333333; font-size: 32rpx;">夜间模式</view>
				<switch @change="changeNightMode" :class="nightMode?'checked':''" :checked="nightMode?true:false"></switch>
			</view>
			<view v-if="develop" class="flex justify-between" style="padding: 32rpx 32rpx;">
				<view class="field-name" style="color: #333333; font-size: 32rpx;">字体大小</view>
				<view class="flex justify-end align-center">
					<view class="field-name" style="color: #999999; font-size: 32rpx;">
						标准
					</view>
					<view class="cuIcon-right" style="margin-left: 16rpx; font-size: 32rpx;"></view>
				</view>
			</view>
			<view v-if="develop" class="flex justify-between" style="padding: 32rpx 32rpx;" @click="clearCache">
				<view class="field-name" style="color: #333333; font-size: 32rpx;">清除缓存</view>
				<view class="flex justify-end align-center">
					<view class="field-name" style="color: #999999; font-size: 32rpx;">
						200MB
					</view>
					<view class="cuIcon-right" style="margin-left: 16rpx; font-size: 32rpx;"></view>
				</view>
			</view>
			<view v-if="develop" class="flex justify-between" style="padding: 32rpx 32rpx;" @click="goToEdit('pushSetting')">
				<view class="field-name" style="color: #333333; font-size: 32rpx;">推送通知设置</view>
				<view class="flex justify-end align-center">
					<view class="cuIcon-right" style="margin-left: 16rpx; font-size: 32rpx;"></view>
				</view>
			</view>
			<view v-if="develop" class="flex justify-between" style="padding: 32rpx 32rpx;">
				<view class="field-name" style="color: #333333; font-size: 32rpx;">检查版本</view>
				<view class="flex justify-end align-center">
					<view class="field-name" style="color: #999999; font-size: 32rpx;">
						1.01
					</view>
					<view class="cuIcon-right" style="margin-left: 16rpx; font-size: 32rpx;"></view>
				</view>
			</view>
			<view v-if="develop" class="flex justify-between" style="padding: 32rpx 32rpx;" @click="goToEdit('about')">
				<view class="field-name" style="color: #333333; font-size: 32rpx;">关于我们</view>
				<view class="flex justify-end align-center">
					<view class="cuIcon-right" style="margin-left: 16rpx; font-size: 32rpx;"></view>
				</view>
			</view>
		</view>
		
		<view class="flex justify-center align-center margin-bottom-xl" style="padding: 0 300rpx;">
			<text style="font-size: 32rpx;color: #FF3B30;" @click="logout">退出登录</text>
		</view>
	</view>
</template>

<script>
	import { mapActions } from "vuex"
	export default {
		data() {
			return {
				personalized: true,
				nightMode: false
			}
		},
		methods: {
			...mapActions(["logoutFrontEnd","PhoneLogin" ]),
			logout() {
				this.logoutFrontEnd().then((res) => {
					console.log("res", res)
				  if(res.data.success){
					  this.$tip.success('退出登录成功!')
					  this.$Router.replaceAll({name:'loginFrontEnd'})
				  }else{
				      this.$tip.alert(res.data.message);
				  }
				}).catch((err) => {
					console.log("logout() err in setting.vue",err)
				})
			},
			goToEdit(pathName) {
				this.$Router.push({
					name: pathName
				})
			},
			clearCache() {
				this.$tip.confirm('确定清除应用缓存？', true, {}, null).then(
					() => {
						// todo
						this.$tip.success("清除缓存成功!")
					}, () => {
						console.log("取消清除缓存")
					}
				)
			},
			changePersonalized(e) {
				this.personalized = e.detail.value;
			},
			changeNightMode(e) {
				this.nightMode = e.detail.value;
			}
		}
	}
</script>

<style>
</style>
